<template>
  <div>
    <div class="book_right">
      <h4 class="b_r_tit" style="height: 70px">{{ bookInfo.bookTitle }}</h4>
      <p class="b_r_tit1" style="height: 50px; color: Red; overflow: hidden">
      </p>
      <p class="ft_b_r_c">
        <em>作者：{{ bookInfo.author }}</em><br>
        定价：<span>{{ bookInfo.price }}</span>元<br>
        印次：{{ bookInfo.printNum }}<br>
        ISBN：{{ bookInfo.ISBN }}<br>
        出版日期：{{ bookInfo.publishTime }}<br>
        印刷日期：{{ bookInfo.printTime }}</p>
      <div class="ft_b_r_c1">
        <div class="tshmjsmfs on" id="buylink">
          在线购买
          <div class="zxgmxlklbbc" style="display: none;">

            <a id="buy" href="http://detail.tmall.com/item.htm?spm=a1z10.1-b.w9858442-8055933095.4.fH3HiL&amp;id=556379815907" title="556379815907" class="on"> <p>纸质书</p></a>

            <a href="http://www.wqbook.com/books/booksn/034455-01"> <p>电子书</p></a>
          </div>
        </div>
        <a class="tshmjsmfs" href="http://www.wqbook.com/books/booksn/034455-01">试读</a>
        <a href="javascript:;" id="yssq" style="display: none" class="tshmjsmfs">样书申请</a>

        <a href="#" id="favorite" class="tshmjsmfs">收藏</a> <a class="tshmjsmfs ft_share" href="#">分享</a>
      </div>
      <ul class="share_content bdsharebuttonbox bdshare-button-style0-16" data-bd-bind="1635479335942" style="display: none;">
        <li><a href="#" class="bds_tsina" data-cmd="tsina"></a></li>
        <li><a href="#" class="bds_sqq" data-cmd="sqq"></a></li>
        <li><a href="#" class="bds_qzone" data-cmd="qzone"></a></li>
        <li><a href="#" class="bds_tqq" data-cmd="tqq"></a></li>
        <li><a href="#" class="bds_weixin" data-cmd="weixin"></a></li>
        <li><a href="#" class="bds_douban" data-cmd="douban"></a></li>
        <li><a href="#" class="bds_renren" data-cmd="renren"></a></li>
      </ul>
<!--      <ul class="content_intro_list clear">-->
<!--        <li v-for="(item,index) in bookInfo2" :key="index"><a href="#" class="">{{ item.title }}</a></li>-->
<!--      </ul>-->

      <el-collapse v-model="activeNames" @change="handleChange" class="el-collapse">
        <el-collapse-item v-for="(item,index) in bookInfo2" :key="index" :title="item.title" :name="item.index">
          <div>{{ item.content }}</div>

        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>

<script>
export default {
  name: "rightDetail",
  data(){
    return{
      activeNames: ['1'],
      bookInfo:
        {
          bookTitle:'服饰中华——中华服饰七千年',author:'黄能福、陈娟娟、黄钢',price:2998,printNum:'1-1',ISBN:'9787302253280',publishTime:'2011.09.01',printTime:'2010.02.03'
        },
          bookInfo2:[
        {
          index: 1,
          title:'内容简介',
          content:'中华服饰源于旧石器时代，在7000年前，已经发明丝、麻等纺织物缝制的衣冠鞋靴等配套的服饰和用骨、角、贝、玉、陶等材料制造的美化生活的装饰品。中华祖先在新石器时代创造的丰盛华美的原始服饰文化，举世独步。夏商周时期，中华服饰进入以“礼”为规制的发展阶段，服饰意识与天地同构，内涵深邃。汉代以后，以儒学为理念的服饰制度，使服饰品类和材质工艺不断发展提高。数千年来，华夏服饰不断受到少数民族和域外异质服饰文化的滋养，使中华服饰不断创新和丰富，形成世界上独树一帜的中华服饰传统，为世人所称羡。' +
              '本书根据以物证史的理念，按历史顺序，以最简明易懂的文字与服饰实际文物的图片相对照，全面系统地介绍了中国自原始社会至今的服饰发展，着重介绍服装形式、服饰制度、服装面料、服饰纹样、首饰配饰的具体面貌。特别着重考古科学的成果与历史文献相印证，内容丰富，'
        },
      ]
    }
  },
  methods:{
    handleChange(val) {
      console.log(val);
    }
  }
}
</script>

<style scoped>
.book_right {
  float: left;
  height: 596px;
  background: #fff;
  margin-left: 30px;
  width: 627px;
  overflow: hidden;
  position: relative;
}
.b_r_tit {
  color: #555555;
  font-size: 26px;
  font-weight: normal;
  margin: 15px 16px 0px 16px;
  width: 598px;
  overflow: hidden;
  height: 70px;
}
.b_r_tit1 {
  font-size: 14px;
  color: #555555;
  margin: 5px 20px 0px 20px;
  height: 45px;
  line-height: 25px;
}
.ft_b_r_c {
  width: 590px;
  float: left;
  font-size: 14px;
  color: #555555;
  margin: 5px 20px 0px 20px;
  line-height: 31px;
}
.ft_b_r_c em {
  font-style: normal;
  width: 584px;
  display: inline-block;
  margin-top: 10px;
  line-height: 25px;
  height: 57px;
}
.ft_b_r_c span {
  font-weight: bold;
  color: #4f266d;
}
.ft_b_r_c1 {
  margin-top: 95px;
  float: right;
  width: 420px;
  margin-right: 20px;
  position: absolute;
  right: 0px;
}
.ft_b_r_c1 .tshmjsmfs {
  display: inline-block;
  margin-right: 3px;
  width: 75px;
  height: 33px;
  border: 1px solid #a8a8a8;
  text-align: center;
  color: #555555;
  font-size: 14px;
  line-height: 33px;
  position: relative;
  float: left;
}

.ft_b_r_c1 .tshmjsmfs.on, .ft_b_r_c1 .tshmjsmfs:hover {
  background: #5c307d;
  color: #fff;
  border: 1px solid #5c307d;
}
.zxgmxlklbbc {
  width: 75px;
  height: 70px;
  background: #fff;
  position: absolute;
  margin-top: 1px;
}
.zxgmxlklbbc p {
  background: #eee;
}
.el-collapse{
  margin-top: 14em;
}
.el-collapse .el-collapse-item{
  float: left;
}
.el-collapse-item__content div{
  height: 12em;
  overflow-y: scroll;
}

</style>